    <div id="MenuList" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" style=" height:100%;margin: 0px;padding: 0px;">
        <div id="bodyFrame" >
            <div id="topBody">
                <div class="row rowSet" style="border-bottom: 1px solid gainsboro;">
                    <nav class="navbar " role="navigation" style="margin: 0px;padding: 0px;border-radius: 0px;background-color: rgb(240,240,240)">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">菜单列表</a>
                        </div>
                        <div>
                            <ul class="nav navbar-nav navbar-right" style="margin: 0px;padding: 5px">
                                <li><button href="#" :class="['btn','btn-default',{'active':queryFlag}]" style="margin-right: 10px" @click="querySwitch()">查询</button></li>
                                <li><button href="#" class="btn btn-primary" style="margin-right: 10px" @click="jumpToEdit()" >新增</button></li>
                                <!--动态调整列显示-->
                                <li class="dropdown">
                                    <button  class="dropdown-toggle btn btn-default" data-toggle="dropdown">列<b class="caret"></b></button>
                                    <ul class="dropdown-menu autoDiv">
                                        <li v-for='item in initListPageDto.columnItemDtoList'>
                                            <a href="#"> <input type="checkbox" v-model="item.showFlag" />{{item.title}}</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div><!-- /.row -->
                <div class="row rowSet" style="padding: 10px 0px 0px 0px;" v-show="queryFlag">
                    <!--查询条件-->
                    <template v-for="(item, index) in initListPageDto.queryItemDtoList" >
                        <div class="form-group col-sm-3" style="margin-bottom: 5px;">
                            <label v-bind:for="'inputFile'+index" class="col-sm-4 control-label" style="text-align: right;padding-right: 5px;">{{item.title}}:</label>
                            <div class="col-sm-8" v-if="item.type == 2">
                                <!-- 渲染字典列表 -->
                                <select   v-model="requestDto[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
                                    <option value="" selected="selected">全部</option>
                                    <template v-for="dictItem in initListPageDto.dict[item.dictCodeType].list" >
                                        <option v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
                                    </template>
                                </select>
                            </div>
                            <div class="col-sm-8" v-else>
                                <input type="text"  v-model="requestDto[item.fieldName]"   class="form-control" v-bind:id="'inputFile'+index" />
                            </div>
                        </div>
                    </template>
                    <div class="form-group col-sm-3" align="center" style="margin-bottom: 5px;">
                        <button type="button" v-on:click="queryClick" class="btn btn-primary  ">查询</button>
                    </div>
                </div><!-- /.row -->
            </div>

            <div id="centerBody" class="panel panel-default">
                <div class="panel panel-default col-sm-10" style="margin: 0px;padding: 0px;border: 0px">
                    <!--列表渲染-->
                    <table class="table table-condensed" style="margin: 0px;padding: 0px;">
                        <thead>
                            <tr>
                                <template v-for='item in initListPageDto.columnItemDtoList'>
                                    <th v-show="item.showFlag == true">{{item.title}}</th>
                                </template>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in responseDtoList">
                            <template v-for='it in initListPageDto.columnItemDtoList'>
                                <td v-show='it.showFlag == true'>
                                    <!--普通-->
                                    <template v-if="it.type == 0" >
                                        {{item[it.fieldName]}}
                                    </template>
                                    <!--图片-->
                                    <img v-if="it.type == 1" :src="$ImageUrl(item[it.fieldName],'small')"   class="img-thumbnail"  width="30px"/>
                                    <!--字典 翻译-->
                                    <template v-if="it.type == 2" >
                                        {{initListPageDto.dict[it.dictCodeType].map[item[it.fieldName]]}}
                                    </template>
                                    <!--日期-->
                                    <template v-if="it.type == 3" >
                                        {{$formatDate('yyyy-MM-dd hh:mm:ss',item[it.fieldName])}}
                                    </template>
                                </td>
                            </template>
                            <td>
                                <button type="button" class="btn btn-link" v-on:click="edit(item)">编辑</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!--右边部分-->
                <div  class="col-sm-2" style="overflow: auto;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <button type="button" class="btn btn-link" v-on:click="queryMenuTree()">刷新</button>
                        </div>
                        <div class="panel-body"  id="menuTree">

                        </div>
                    </div>
                </div><!-- /.col-lg-6 -->
            </div>
            <div  id="bottomBody" style="padding-top: 5px;padding-left: 15px">
                <!--加载分页-->
                <ul class="pagination" style="margin: 0px">
                    <li :class="pageNo == 1 ? 'disabled' : '' ">
                        <a href="#" v-on:click="pageClick(pageNo-1)">&laquo;</a>
                    </li>
                    <li v-for="i in pageLength" :class="pageNo == i ? 'active' : '' ">
                        <a href="#"  v-on:click="pageClick(i)">{{i}}</a>
                    </li>
                    <li :class="pageNo == pageLength ? 'disabled' : '' ">
                        <a href="#"  v-on:click="pageClick(pageNo+1)">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function(){
        //采用vue
        var MenuList=new Vue({
            el: '#MenuList',
            data: {
                initUrl : Vue.prototype.getUrl('/pageInit/getInitListPageDto/Menu'),
                editUrl: '',
                queryUrl : '',
                queryFlag : false,
                menuTreeUrl : Vue.prototype.getUrl('/core/config/menu/getAllMenuTree'),
                //用于初始化页面的对象
                initListPageDto:{
                    queryItemDtoList:[], //查询对象
                    columnItemDtoList:[], //列表初始化对象
                    dict:{}
                },
                //字典树对象
                menuTreeDto:{},
                //查询请求的对象
                requestDto:{},
                //返回的对象列表
                responseDtoList:[],
                pageNo:1,    //当前页码
                limit:10,    //每页条数
                pageLength:0, //总页数
                isSend:false //分页查询的点击状态
            },
            methods: {
                init:function () {
                    var that = this;
                    this.$send(this.initUrl,null,function(data){
                        console.log('初始化成功！！'+JSON.stringify(data));
                        that.initListPageDto = data;
                        //初始化url
                        that.editUrl= data.editUrl;
                        that.queryUrl= Vue.prototype.getUrl(data.queryUrl);
                        //调用查询
                        that.query();
                    });
                },
                //切换查询标志
                querySwitch: function () {
                    this.queryFlag = !this.queryFlag;
                    setTimeout(function() {
                        console.log('刷新框架');
                        reSizeBodyFrame();
                    },50);
                },
                jumpToEdit:function() {
                    //加载页面
                    loadPageToBodyMain(this.editUrl);
                },
                //点击查询按钮时候
                queryClick:function(){
                    this.pageNo =1;
                    this.query();
                },
                //点击查询按钮时候
                query:function(){
                    var that = this;
                    var url = this.queryUrl + '?pageNo='+this.pageNo+'&limit='+this.limit;
                    console.log(JSON.stringify(this.requestDto));
                    this.$send(url,this.requestDto,function(data){
                        console.log('查询成功！！'+JSON.stringify(data.dataList));
                        that.responseDtoList = data.dataList;
                        that.pageLength = data.pageLength;
                    });
                },
                //点击编辑的时候
                edit:function (item) {
                    sessionStorage.editId=item.id;
                    //跳转
                    this.jumpToEdit();
                },
                //获取字典树对象
                queryMenuTree:function(){
                    var that = this;
                    this.$send(this.menuTreeUrl,null,function(data){
                        treeUI.treeData = data;
                    });
                },
                /**
                 * 当控件触发按钮时
                 */
                pageClick: function (i) {
                    this.setNowPageNo(i);
                    //触发引用的控件的方法
                    if(this.isSend){
                        this.isSend =false; //清除状态
                        this.query();
                    }
                },
                /**
                 * 根据点击的序号更新页码
                 * @param i
                 */
                setNowPageNo:function(i){
                    if(i<1){
                        i=1;
                    }else if(i>this.pageLength){
                        i = this.pageLength;

                    }else if(i != this.pageNo){
                        this.isSend = true;
                    }
                    this.pageNo  = i ; // 设置当前页号
                },

            },

            created: function () {
                this.init();

            },
        });
    //以下是原生js写入的地方
        //加入图片选择控件
        $('#menuTree').load(Vue.prototype.getUrl('/show/page/common/treeComponent'),function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                //设置对象
                Vue.prototype.$registerTreeComponent(
                        function(item,isFolder) {
                            console.log('$clickTreeItem:11' + item.name + isFolder);
                            console.log(isFolder);
                        },
                        function(item,isFolder) {
                            console.log('$dbClickTreeItem:22	' + item.name + ' ' + isFolder);
                        }
                );
                //加载树组件
                MenuList.queryMenuTree();
            } else if(statusTxt=="error"){
                alert("Error: "+xhr.status+": "+xhr.statusText);
            }
        });

    });
</script>
